<template>
  <div style="width: 100%">
    <el-input
      v-model="value"
      style="width: 100%"
      placeholder="请选择"
      readonly
      @click="show"
    />
    <el-dialog
      :width="800"
      v-model="formVisible"
      title="抽检人员选择"
      @close="formCancel"
    >
      <div class="popup">
        <div class="search">
          <el-input
            v-model="search"
            style="width: 100%"
            placeholder="请输入人员姓名"
            :suffix-icon="Search"
            @input="changeSearch"
          />
        </div>
        <div class="table">
          <el-table :data="tableData" v-loading="loading" :height="300">
            <el-table-column prop="nickName" label="姓名" width="150" />
            <el-table-column prop="orgName" label="单位" />
            <el-table-column prop="post" label="部门职务" />
            <el-table-column label="操作" width="80">
              <template #default="{ row }">
                <el-checkbox
                  v-model="row.checked"
                  @change="(e) => change(e, row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="m-table__pagination">
          <!--<div class="m-table__pagination__total">-->
          <!--  共 {{ dataTotal }} 条记录 第 {{ params.pageNum }} /-->
          <!--  {{ Math.ceil(dataTotal / params.pageSize) }} 页-->
          <!--</div>-->
          <el-pagination
            background
            layout="prev, pager, next, sizes, jumper"
            v-model:currentPage="params.pageNum"
            v-model:page-size="params.pageSize"
            :total="dataTotal"
            @size-change="handleSizeChange"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
        <div class="content">
          <div class="content-label">已选</div>
          <div class="content-list">
            <div
              class="content-list-item"
              v-for="it in seleckKeyIds"
              :key="it.value"
            >
              <span>{{ it.name }}</span>
              <el-icon
                color="#999999"
                style="cursor: pointer"
                @click="del(it.value)"
                ><Close
              /></el-icon>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div style="display: flex; justify-content: flex-end; width: 100%">
          <el-button @click="resetForm">取消</el-button>
          <el-button type="primary" @click="submitForm"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Search, Close } from '@element-plus/icons-vue'
import { userList } from '@/api/spotCheck/spotCheck'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  multiple: {
    type: Boolean,
    default: () => true
  }
})

const emit = defineEmits(['update:modelValue'])

const value = ref([])
const search = ref('')
const formVisible = ref(false)

watch(
  () => props.modelValue,
  (val) => {
    console.log('valval', val)
    value.value = val.map((i) => i.name).join(',')
  }
)
const formCancel = () => {
  formVisible.value = false
}
const loading = ref(false)

const show = () => {
  formVisible.value = true
  seleckKeyIds.value = JSON.parse(JSON.stringify(props.modelValue))
  init()
}

const tableData = ref([])
const seleckKeyIds = ref([])
watch(
  () => seleckKeyIds.value,
  (val) => {
    tableData.value.forEach((i) => {
      if (val.some((j) => j.value === i.userId)) {
        i.checked = true
      } else {
        i.checked = false
      }
    })
  },
  { deep: true }
)

const change = (e, row) => {
  if (e) {
    if (seleckKeyIds.value.some((i) => i.value === row.userId)) return
    if (props.multiple) {
      seleckKeyIds.value.push({
        name: row.nickName,
        value: row.userId
      })
    } else {
      seleckKeyIds.value = [
        {
          name: row.nickName,
          value: row.userId
        }
      ]
    }
  } else {
    if (seleckKeyIds.value.some((i) => i.value === row.userId)) {
      seleckKeyIds.value = seleckKeyIds.value.filter(
        (i) => i.value != row.userId
      )
    }
  }
}

const del = (id) => {
  seleckKeyIds.value = seleckKeyIds.value.filter((i) => i.value != id)
}
const init = () => {
  loading.value = true
  userList(params.value)
    .then((res) => {
      res.data.forEach((i) => {
        i.checked = false
        if (seleckKeyIds.value.some((j) => j.value === i.userId)) {
          i.checked = true
        }
      })
      tableData.value = res.data
      dataTotal.value = res.total
      console.log('props', props.modelValue)
    })
    .finally(() => {
      loading.value = false
    })
}

//分页
const dataTotal = ref(0)
const params: any = ref({
  pageNum: 1,
  pageSize: 20
})

function handleSizeChange(e) {
  params.value.pageNum = 1
  params.value.pageSize = e
  init()
}

function currentChange(e) {
  params.value.pageNum = e
  init()
}

const submitForm = () => {
  emit('update:modelValue', JSON.parse(JSON.stringify(seleckKeyIds.value)))
  formVisible.value = false
}

const resetForm = () => {
  formVisible.value = false
}

const changeSearch = (e) => {
  console.log('e=>', e)
  params.value.nickName = e
  init()
}
</script>

<style scoped lang="scss">
.search {
  display: flex;
  justify-content: space-between;
}
.btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0;
}
.select {
  width: 480px;
}
.search {
  margin-bottom: 20px;
}
.content {
  padding-top: 20px;
  width: 100%;
  display: flex;
  .content-label {
    width: 32px;
    height: 36px;
    padding-right: 20px;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    display: inline-flex;
    align-items: center;
  }
  .content-list {
    flex: 1;
    .content-list-item {
      background: #e8f3ff;
      border-radius: 0px 0px 0px 0px;
      padding: 0px 10px;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      display: inline-flex;
      align-items: center;
      margin-right: 20px;
      margin-bottom: 10px;
      span {
        margin-right: 10px;
        margin-bottom: 2px;
      }
    }
  }
}
.m-table__pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30px 30px 30px 30px;
  box-sizing: border-box;
  &__total {
    color: #0000006d;
  }
}
:deep(.popup .el-input__wrapper) {
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset !important;
}
:deep(.el-input__validateIcon) {
  display: none !important;
}
</style>
